<template>
	<view>
		<view style="padding: 0 40rpx;background-color: #FFFFFF;">
		  <u--form
		      labelPosition="left"
		      ref="form1"
			  :model="list"
		  >
		    <u-form-item
		        labelAlign="center"
		        label="巡检设备"
		        prop="userInfo.device_name"
		        :borderBottom="false"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
				@click="show = true"
		        :labelStyle="{'font-size':'50rpx'}"
		    >
			
		  <u--input
		  						v-model="device_name"
		  						disabled
		  						disabledColor="#ffffff"
		  						placeholder="请选择巡检设备"
		  						border="none"
		  				></u--input>
		  				<u-icon
		  						slot="right"
		  						name="arrow-right"
		  				></u-icon>
		    </u-form-item>
		    <!-- <u-form-item
		        labelAlign="center"
		        label="手机号码"
		        prop="userInfo.mobile"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		
		    >
		      <u--input
		          placeholder="请输入手机号码"
		          border="none"
		          width="300"
				  type="number"
				  v-model="list.userInfo.mobile"
			  	  disabledColor="#ffffff"
				  disabled
		      ></u--input>
		    </u-form-item> -->
		   <!-- <u-form-item
		        labelAlign="center"
		        label="报修位置"
		        prop="userInfo.location"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		
		    >
		      <u--input
		          placeholder="请填写位置(如:房号)"
		          border="none"
		          width="300"
				  v-model="list.userInfo.location"
				  disabledColor="#ffffff"
				  disabled
		      ></u--input>
		    </u-form-item> -->
			<!-- <u-form-item
			    labelAlign="center"
			    label="报修状态"
			    prop="userInfo.location"
			    borderBottom
			    ref="item1"
			    labelWidth="200"
					
			>
			<u-tag text="已处理" size="mini" v-if="list.userInfo.status == 2" type="success" shape="circle"></u-tag>
			<u-tag text="待处理" size="mini" v-if="list.userInfo.status == 1" type="primary" shape="circle"></u-tag>
			</u-form-item> -->
		    <u-form-item
		        labelAlign="center"
		        label="备注"
		        prop="mark"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		
		    >
		      <u--textarea height="100rpx" placeholder="请填写备注" confirm-type="send" v-model="mark" disabledColor="#ffffff"></u--textarea>
		    </u-form-item>
		    <!-- <u-form-item
		        labelAlign="center"
		        label="报修图片"
		        borderBottom
		        ref="item1"
		        labelWidth="200"
		
		    >
				<u--image v-for="(item,index) in list.userInfo.fault_list" :key="index" width="150" height="150" @click='imgPreview(list.userInfo.fault_list,index)'  :src="item" ></u--image>
		    </u-form-item> -->
			<u-form-item
			    labelAlign="center"
			    label="巡检图片"
			    borderBottom
			    ref="item1"
			    labelWidth="200"
					
			>
			<u--image v-for="(item,index) in fileList" :key="index" width="150" height="150" @click='btnphoto'  :src="item"></u--image>
			<!-- <u--image v-for="(item,index) in list.userInfo.complete_list" :key="index" width="150" height="150" @click='imgPreview(list.userInfo.complete_list,index)'  :src="item" v-else></u--image> -->
			</u-form-item>
			<u-form-item
				v-for="(item,index) in type_list"
			    labelAlign="center"
			    :label='item.content+"是否异常"'
			    borderBottom
			    ref="item1"
			    labelWidth="200"
			>
			<u-radio-group v-model="item.state" placement="row" @change="groupChange">
			    <u-radio   label="否" name="0"  :size="30" :labelSize="30"></u-radio>
				<u-radio  :customStyle="{marginLeft: '10px'}" label="是" name="1" :size="30" :labelSize="30"></u-radio>
				</u-radio-group>
			</u-form-item>
		  </u--form>
		</view>
		<u-picker :show="show" :columns="columns" keyName="name"   itemHeight="80" @cancel="show = false" @confirm="chooseBuilding" :closeOnClickOverlay="true" @close="show = false"></u-picker>
		<view style="margin-top: 40rpx;padding: 0 20rpx;" @click="submit">
		  <u-button type="primary" size="large">添加巡检</u-button>
		  <!-- <u-button type="success" style="margin-top: 10px;" @click="btn" size="large">返回</u-button> -->
		</view>
		<view style="background-color: #FFFFFF;">
			  <u-cell-group
			      :border="false">
			    <u-cell
			        :titleStyle="{'font-size':'38rpx'}"
			        size="large"
			        title="巡检记录"
			    ></u-cell>
			  </u-cell-group>
			  <view class="repairList">
			    <span class="cont">巡检名称</span>
			    <span class="cont">类型</span>
				 <span class="cont">备注</span>
				  <span class="cont">状态</span>
			  </view>
			 <view class="repairList" v-for="(item,index) in record_list" :key="index" >
			    <span class="cont" style="font-size: 24rpx;">{{item.device_name}}</span>
			    <span class="cont">{{item.type_name}}</span>
				 <span class="cont">{{item.mark}}</span>
				  <span class="cont">已巡检</span>
			  </view>
			  </view>
		
	</view>
</template>

<script>
	import Api from '@/util/api.js'
	export default {
		data() {
			return {
				id:'',
				count: 5,
				columns:[],		//设备列表
				show:false,		//是否显示选择器
				device_name:'',	//设备名称
				device_id:'',	//设备id
				type_list:[],	//巡检内容
				type_name:'',	//巡检类型名称
				type_id:0,		//巡检类型id
				mark:'',		//备注
				list:{
					userInfo:{
						// name:'小名',
						// mobile:'13433397750',
						// location:'A01',
						// content:'门把手坏了'
					}
				},
				record_list:[],
				fileList: [''],
				fault_list: [
					"http://127.0.0.1:8012/upload/attachment/12/cca5746488e098e3b9afa569dbe83b.jpg",
					"http://127.0.0.1:8012/upload/attachment/d3/4b03a8ea6a20fd4cc36b1b7b1b8b23.jpg"
				    ],
			};
		},
		onLoad(e) {
			// console.log('id',e)
			var that = this
			
			// if('id' in e){
			// 	that.id = e.id
				that.getPollingDevice()
				that.getPollingRecord()
			// }
		},
		onShow() {
			var that = this
			that.checkUser()
		},
		methods:{
			// 修改报修记录
		  async	submit(e){
				var that = this
				var fileList = that.fileList;
				var type_list = that.type_list
				var fault_img  = []
				var formData = {
						category:'un',
						admin_id:that.userInfo.id
				}
				if(that.device_id == ''){
					uni.showToast({
						title: '请选择巡检设备',
						duration: 2000,
						icon:'none'
					});
					return;
				}
				uni.showLoading({
					title: '加载中'
				});
				for (let item of fileList) {
					if(item != ''){
					await Api.getUpload(item,'fee_date',formData).then(res=>{
							console.log('res',res)
							if(res.data != []){
								fault_img.push(res.data.detail.url)
							}
							// that.img = res.data.detail.link
							// that.list.userInfo.avatar = res.data.detail.link
						})
					}
				}
				var normal_id = ''
				var no_normal_id = ''
				for (let item of type_list) {
					
					if(item.state == '1'){
						if (!no_normal_id) {
							no_normal_id = item.id
						  } else {
							no_normal_id = no_normal_id + ',' + item.id
						  }
					}else{
						 if (!normal_id) {
							normal_id = item.id
						  } else {
							normal_id = normal_id + ',' + item.id
						  }
					}
				}
				var data = {
					// id:that.id,
					user_id:that.userInfo.id,
					state:1,
					img:fault_img,
					type_id:that.type_id,
					type_name:that.type_name,
					device_name:that.device_name,
					normal_id:normal_id,
					no_normal_id:no_normal_id,
					mark:that.mark
				}
				// console.log(data,normal_id,no_normal_id);
			  await	Api.savePollingRecord(data).then(res=>{
				  console.log('提交成功',res)
				  that.fileList = ['']
				  that.type_list = []
				  that.type_id = 0
				  that.type_name = ''
				  that.device_name = ''
				  that.mark = ''
				  that.getPollingRecord()
				  uni.hideLoading();
				  // that.getPollingDevice()
			  })
			},
			
			// 获取报修详情
			getPollingDevice(){
				var that = this
				var data = {
					limit:1000
				}
				uni.showLoading({
					title: '加载中'
				});
				Api.getPollingDevice(data).then(res=>{
					console.log('获取成功',res)
					that.columns.push(res.data.list)
					uni.hideLoading();
				})
			},
			// 选择图片
			btnphoto() {
				var that=this;
					uni.chooseImage({
						count: 3, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function (res) {
							console.log('临时图片路径',res)
								if(res.tempFilePaths.length == 3){
									console.log('我进来了')
									that.fileList = res.tempFilePaths;
								}else if(res.tempFilePaths.length == 2){
									// that.fileList.unshift(res.tempFilePaths[0]);
									that.fileList = res.tempFilePaths;
									that.fileList.push('')
								}else if(res.tempFilePaths.length == 1){
									// that.fileList = ;
									if(that.fileList.length <= 3){
										that.fileList.splice(that.fileList.length-1,0,res.tempFilePaths[0])
									}else{
										that.fileList.splice(that.fileList.length-2,1)
										that.fileList.splice(that.fileList.length-1,0,res.tempFilePaths[0])
									}
								}
								if(that.fileList.length == 4){
									that.fileList.splice(that.fileList.length-1,1,)
								}
								console.log(that.fileList);
							
										  
						}
					});
			},
			// 点击预览图片
			imgPreview(list,idx){
				// 图片预览
				var that = this
				var list = list
				console.log('我被点击了')
				// const imgPreview = (list, idx) => {
				    // list：图片 url 数组
				    // if(list && list.length > 0){
				        uni.previewImage({
				            current:idx,    //  传 Number H5端出现不兼容
				            urls: list
				        });
				    // }
				// }
			},
			
			// 检查用户信息
			checkUser(){
				var that  = this
				var userInfo = that.userInfo;
					if(localStorage.getItem('userInfo')){
						that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
					}else{
						uni.showToast({
						    icon: 'none',   
						    duration: 3000,
						    title: "当前用户未登录"
						});
						return;
					}
				
				
			},
			// 选择巡检设备
			chooseBuilding(e){
				console.log('确认事件',e)
				var that = this
				that.device_name = e.value[0].name
				that.device_id = e.value[0].id
				that.type_list = e.value[0].pollingType ? (e.value[0].pollingType.children ? e.value[0].pollingType.children : []) : [],
				that.type_name = e.value[0].pollingType ? e.value[0].pollingType.name : '',
				that.type_id   = e.value[0].pollingType ? e.value[0].pollingType.id : 0,
				console.log('巡检内容',that.type_list)
				that.show = false
			},
			groupChange(e) {
			console.log('groupChange', this.type_list);
			},
			
			getPollingRecord(){
				var that = this
				var data = {}
				Api.getPollingRecord(data).then(res=>{
					console.log('获取成功',res)
					that.record_list = res.data.list
					// uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="scss">
.repairList {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		align-items: center;
		border-bottom: solid #eaebec 1rpx;
	}
	.cont{
		width: 20%;
		overflow:hidden;/*内容超出后隐藏*/
		text-overflow:ellipsis;/*超出内容显示为省略号*/
		white-space:nowrap;/*文本不进行换行*/
	}
</style>
